<template>
	<div class="homebox">
		<Tabbar :leftArrow='true' :title="$t('textTrans.修改支付密码')" :hidden='false'></Tabbar>
		<div class="share-back">
		
			<van-field v-model="form.old_password" type="password" :placeholder="$t('textTrans.请输入旧密码')" clearable>
			</van-field>
			<van-field v-model="form.pay_password"  type="password":placeholder="$t('textTrans.请输入新密码')" clearable>
			</van-field>
			<van-field v-model="form.pay_password_re" type="password" :placeholder="$t('textTrans.请再次输入新密码')" clearable>
			</van-field>
			<van-button class="loginBtn" style="margin:5px 0" @click="submitReg">{{$t('textTrans.提交')}}</van-button>
		</div>
		<van-action-sheet v-model="show" :actions="actions" :cancel-text="$t('textTrans.取消')" close-on-click-action
			@select="getLang" @cancel="show = false" />
	</div>
</template>
<script>
	import QRCode from "qrcodejs2";
	import Clipboard from "clipboard";
	import {
		updatePayPassword,
		usershare
	} from "@/api/personal";
	export default {
		data() {
			return {
				show: false,
				actions: [{
						name: this.$i18n.t('textTrans.基本账户')
					},
					// {name:$t('textTrans.基本账户')},
				],
				data: [],
				locale: "en",
				copyContent: "",
				uuid: "",
				form: {},
				codeArr: [],
			};
		},
		mounted() {
			this.getData();
			let _this = this;
			const clipboard = new Clipboard("#copyBtn");
			clipboard.on("success", function() {
				_this.$toast("Copy succeeded");
			});
			clipboard.on("error", function() {
				this.$toast("copy failed");
			});
		},
		methods: {
			submitReg(){
				updatePayPassword(this.form).then(res=>{
					console.log(res)
					this.form={}
				})
			},
			onClickLeft() {
				this.$router.go(-1);
			},
			getData() {
				// usershare().then((res) => {
				// this.data = res;
				this.copyContent = `123121111111111111113`;
				// this.codeArr = res.uuid.split("");
				this.qrcode();
				// });
			},
			qrcode() {
				let qrcode = new QRCode("qrcode", {
					width: 110, // 设置宽度，单位像素
					height: 110, // 设置高度，单位像素
					render: "table",
					text: `https://${window.location.host}/#/Register?uuid=${this.uuid}`, // 二维码内容
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.share-back {
		box-sizing: border-box;
		padding: 20px;
		font-size: 15px;
		color: #333;
		width: 90%;
		margin: 50px auto;
		background: #B5F3EA;
		border-radius: 25px;
	}

	.homebox {
		width: 100%;
		height: 100%;
		position: relative;
	}

	/deep/#qrcode {
		display: flex;
		justify-content: space-between;
		text-align: center;
		border-radius: 8px;
		box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.04);
		padding: 14px;

		img {
			text-align: center;
			width: 110px;
			height: 110px;
		}
	}

	.van-nav-bar {
		background: transparent;
		border: none;

		/deep/.van-nav-bar__title {
			color: #fff;
		}

		/deep/ .van-icon {
			color: #fff;
		}
	}

	/deep/ .van-field {
		margin: 10px 0;
		border-radius: 10px;
	}

	/deep/.van-cell {
		margin: 10px 0;
		border-radius: 10px !important;
	}

	#copyCode {
		border: 0 none;
		background: transparent;
	}
</style>
